<template>
  <div>
       <!-- 顶部 -->
    <div>
      <van-nav-bar
        title="笑话大全"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
      </van-nav-bar>
    </div>

    <div class="jokeBox">
        <p v-for="(item, index) in jokeList" :key="index" v-html="item.content">{{ item.content}}</p>
    </div>
    <div class="page">
      <button @click="next">下一页</button>
      <button @click="previous">上一页</button>
    </div>
    

   
  </div>
</template>
<script>
import { joke } from "../api/api";

export default {
  name: "joke",
  data() {
    return {
      jokeList: "",
      currentPage: this.jokeList,
      page:0,
    };
  },
  created() {
    joke(this.currentPage).then((res) => {
      console.log(res);
      this.jokeList = res.result.data;
    });
  },
  methods:{
      onClickLeft() {
      this.$router.back;
      window.history.go(-1);
    },
    onClickRight() {},
    next(){
      console.log(134);
      this.page++
      joke(this.page).then((res) => {
      console.log(res);
      this.jokeList = res.result.data;
    });
    },
    previous(){
      this.page++
      joke(this.currentPage).then((res) => {
      console.log(res);
      this.jokeList = res.result.data;
    });
    }

  },

};
</script>
<style scoped lang="less">
.page {
  margin-top: 8px;
  margin: auto;
  width: 88%;
  display: flex;
  // justify-content: space-between;
  justify-content: space-around;
}
.jokeBox {
  margin: auto;
  width: 88%;
//   background-color: red;
  background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2…sec=1628859943&t=d26b3134ff59c72a5980c7f4b319b0ef);
   text-align: left;
   text-indent: 2em;
}

// 顶部
/deep/.van-nav-bar__content {
  background-color: #cc0000;
}
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
/deep/.van-nav-bar__text {
  color: #fff;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
/deep/.van-button--info {
  background-color: #cc0000;
  border: 1px solid #cc0000;
}
/deep/.van-field__label {
  width: 3.2em;
}
</style>
